<template>
    <el-dialog :visible.sync="showOrderDetail" :append-to-body="true" :close-on-click-modal="false" width="50%"
        :close-on-press-escape="false" :show-close="false" class="ele-modal" :modal-append-to-body='false'>
        <h4 slot="title">退款详情</h4>
        <div class="product-detail-modal">
            <div>
                <h3 class="panel-title">退款基本信息 </h3>
            </div>
            <el-row>
                <ul class="bill-tips clearfix">
                    <li>
                        <em>所属订单</em>
                        <span>{{order.order.orderNumber}}</span>
                    </li>
                    <!-- <li>
                        <em>退款商品种类</em>
                        <span>{{order.refundCount}} 种</span>
                    </li> -->
                    <li>
                        <em>退款总金额</em>
                        <span>{{order.totalAmount}} 元</span>
                    </li>
                </ul>
            </el-row>
            <el-row>
                <ul class="bill-tips clearfix">
                    <li>
                        <em>申请时间</em>
                        <span>{{order.createTime}}</span>
                    </li>
                    <li>
                        <em>订单状态</em>
                        <span v-if="order.status==1">待审核</span>
                        <span v-if="order.status==2">已退款</span>
                        <span v-if="order.status==3">未通过</span>
                    </li>
                </ul>
            </el-row>
            <div>
                <h3 class="panel-title">客户基本信息</h3>
            </div>
            <el-row>
                <ul class="bill-tips clearfix">
                    <li>
                        <em>姓名</em>
                        <span>{{order.order.user.realName}}</span>
                    </li>
                    <li>
                        <em>电话</em>
                        <span>{{order.order.user.mobile}}</span>
                    </li>
                </ul>
            </el-row>
            <div v-if="order.order.store">
                <h3 class="panel-title">团基本信息</h3>
            </div>
            <el-row v-if="order.order.store">
                <ul class="bill-tips clearfix">
                    <li>
                        <em>姓名</em>
                        <span>{{order.order.store.storeName}}</span>
                    </li>
                    <li>
                        <em>团长</em>
                        <span>{{order.order.store.realName}}</span>
                    </li>
                    <li>
                        <em>电话</em>
                        <span>{{order.order.store.mobile}}</span>
                    </li>
                </ul>
            </el-row>
            <el-row v-if="order.order.store">
                <ul class="bill-tips clearfix">
                    <li>
                        <em>团地址</em>
                        <span>{{order.order.store.address}}</span>
                    </li>
                </ul>
            </el-row>
            <div>
                <h3 class="panel-title">退款商品列表</h3>
            </div>
            <el-row>
                <el-table :data="products.list" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" class="list-table" :header-cell-style="{'background-color': '#F5F5F6'}" max-height="300">
                    <el-table-column prop="categoryName" label="商品种类">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称">
                    </el-table-column>
                    <el-table-column align="center" label="商品图片" prop="pic">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <div style="text-align: center;">
                                    <img :src="scope.row.pic" class="image" style="width: 200px;height:200px">
                                </div>
                                <div slot="reference" class="name-wrapper">
                                    <img :src="scope.row.pic" class="image" style="width: 36px;height:36px">
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="model" label="规格">
                    </el-table-column>
                    <el-table-column prop="specifications" label="型号">
                    </el-table-column>
                    <el-table-column prop="" label="数量" width="100">
                        <template slot-scope="scope">
                            {{scope.row.num + scope.row.specsName}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格(元)">
                    </el-table-column>
                </el-table>
                <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page.sync="products.currPage" :page-size="products.pageSize"
                    layout="total, prev, pager, next" :total="products.totalCount">
                </el-pagination>
            </el-row>
        </div>
        <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">确 定</a>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "chargeBackDetail",
        props: {
            showOrderDetail: {
                type: Boolean,
                default: false
            },
            order: {
                type: Object
            },
            products: {
                type: Object
            },
            orderId:{
                type:String
            }
        },
        data() {
            return {
                query:{
                    page:''
                }
            }
        },
        mounted: function() {},
        methods: {
            onCancel() {
                this.newForm = this.$options.data().newForm;
                this.$emit('onCancelNewModal');
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllProducts();
            },
            async listAllProducts(){
                this.query.id = this.orderId
                let res = await this.$api.get('/mall/ordergoods/list', this.query);
                this.products = res.page
            },
            objectSpanMethod({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                if (columnIndex === 0) {
                    if (rowIndex % 2 === 0) {
                        return {
                            rowspan: 2,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 0
                        };
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }
</style>
